<template>
  <div>
    <Modal
      v-model="uploadModal"
      :title="getTitle()"
      @on-cancel="cancel"
      @on-visible-change="cancel"
    >
      <div style="font-size:14px;line-height:34px;">
        <ul style="list-style:none ;" class="uploadTips">
          <li>
            <Icon type="ios-star"></Icon>每次只支持导入5000条销售线索
          </li>
          <li>
            <Icon type="ios-star"></Icon>每个分组最多支持导入15000条销售线索
          </li>
          <li>
            <Icon type="ios-star"></Icon>导入线索的时候会对电话号码进行查错处理
          </li>
          <li>
            <Icon type="ios-star"></Icon>性别F=男M=女，备注最多100个文字。
          </li>
          <li>
            <Icon type="ios-star"></Icon>
            <a :href="templateUrl" target="_blank">下载模板</a>
          </li>
        </ul>
      </div>
      <div slot="footer">
        <div v-show = "disabled||uploadPercent==100" style="width:60%;float:left;">
          <Progress :percent="uploadPercent" :success-percent="uploadPercent" :stroke-width="15"/>
        </div>
        <div style="width:40%;float:right;">
          <Upload
            v-if="currentGroup.id"
            :action="uploadUrl"
            accept=".csv"
            :show-upload-list="false"
            :headers="uploadHead"
            :max-size="2*1024"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="uploadBefore"
            :data="currentGroup"
            :disabled="disabled"
            :on-progress="uploading"
          >
            <Button :loading="disabled" shape="circle" icon="ios-cloud-upload-outline">导入线索</Button>
          </Upload>
        </div>
        <div style="clear:both;"></div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { baseUrl } from "@/libs/axios-cfg";

export default {
  data() {
    return {
      uploadModal: true,
      disabled: false,
      uploadUrl: this.getBaseUrl() + "/clue/uploadFile",
      uploadHead: {
        token: sessionStorage.getItem("token")
      },
      uploadPercent: 0,
      refresh: false,
      templateUrl: baseUrl + "/call/user_data/template.csv",
      interval: null,
      loading:false,
    };
  },
  props: {
    currentGroup: {
      type: Object,
      default: {}
    }
  },
  methods: {
    getTitle() {
      return "导入线索：" + this.currentGroup.groupName;
    },
    uploadSuccess(response, file, fileList) {
      this.disabled = false;
      if (this.checkIsSsuccess(response)) {
        let data = response.data;
        this.uploadPercent = 100;
        var msg =
          "导入成功！保存：" +
          data.saveCount +
          "条。查错：" +
          data.incorrectPhoneCount +
          "条";
        this.refresh = true;
        this.$Message.success({
          content: msg,
          duration: 2,
          closable: true,
          onClose: () => {
            // this.clueData = this.initTableData();
            // this.getClueList();
            this.$emit("uploadSuccess");
          }
        });
      } else {
        this.$Message.error({
          content: response.msg,
          duration: 2,
          closable: true
        });
      }
    },
    uploadError() {
      this.disabled = false;
      this.$Message.error({
        content: "导入失败！",
        duration: 2,
        closable: true
      });
    },
    uploadBefore(file) {
      // if ("application/vnd.ms-excel" != file["type"]) {
      //   this.$Message.error({
      //     content: "请选择csv格式的文件:"+file["type"],
      //     duration: 2,
      //     closable: true
      //   });
      //   return false;
      // }
      if (!this.currentGroup["id"]) {
        this.$Message.info({
          content: "请先选择分组再进行导入！",
          duration: 2,
          closable: true
        });
        return false;
      }
      this.disabled = true;
      return true;
    },
    uploading(event, file, fileList) {
      this.uploadPercent = 0;
      this.interval = setInterval(() => {
        if (this.uploadPercent >= 99) {
        } else if (this.uploadPercent >= 96) {
          this.uploadPercent = 99;
        } else if (this.uploadPercent >= 90) {
          this.uploadPercent = this.uploadPercent + parseInt(1 + (4 - 1) * (Math.random()));
        } else {
          this.uploadPercent = this.uploadPercent + 10;
        }
      }, 500);
    },
    cancel() {
      this.$emit("cancel", { name: "uploadModal", refresh: this.refresh });
    }
  },
  watch: {
    disabled(newValue) {
      if (newValue) {
        // this.$store.commit('showLoading');
      } else {
        // this.$store.commit('hideLoading');
      }
    }
  },
  beforeDestroy: function() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  }
};
</script>